<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        ul,
        li {
            list-style: none;
        }

        #con li {
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        #con li .item-img {
            width: 30%;
        }

        #con li .item-img img {
            width: 100%;
        }

        #con li .item-text {
            width: 60%;
        }

        #con li .item-text .item-tt {
            margin-top: 40px;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <ul id="con">
        <!-- <li>
            <div class="item-img"><img src="https://hotkidceo-1251330842.file.myqcloud.com/2022062414262400203.jpg"
                    alt=""></div>
            <div class="item-text">
                <div class="item-title">sdgfdfafa</div>
                <div class="item-tt">
                    <span class="price">12</span>
                    <span class="num">1</span>
                </div>
            </div>
        </li> -->
    </ul>
    <script>
        //将缓存中的数据获取出来
        var data = localStorage.getItem('cart') == null ? [] : JSON.parse(localStorage.getItem('cart'));

        //将数组的数据写到 页面上
        var str = "";
        for (var i = 0; i < data.length; i++) {
            str += `<li>
            <div class="item-img"><img src="${data[i].imgsrc}"
                    alt=""></div>
            <div class="item-text">
                <div class="item-title">${data[i].name}</div>
                <div class="item-tt">
                    <span class="price">${data[i].price}</span>
                    <span class="num">${data[i].num}</span>
                </div>
            </div>
        </li>
            `;
        }
        //将字符串添加到 ul
        document.querySelector('#con').innerHTML = str;

        //功能： 当 购物车中的数据为空的时候,显示购物车为空的提示
    </script>
</body>

</html>